<template>
  <div class="top">
    <div id="sys" class="clearFix">
      <h1><img src="../assets/logo.png" alt="" srcset=""><span>Hello My </span></h1>
      <div>
        <router-link v-for="(items,index) in allData" :key="index" :to="items.to">{{items.text}}</router-link>
        <!-- <router-link to="/SysUser">{{title}}</router-link>
        <router-link to="/business">business</router-link> -->
      </div>
    </div>
    <div class="banner">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(items,index) in allData" :key="index" :style="{'backgroundColor': items.colors}">
          <router-link :key="index" :to="items.to">{{items.text}}</router-link>
        </swiper-slide>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-pagination"  slot="pagination"></div>
        <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
      </swiper>
    </div>
  </div>
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        // title: 'SysUser',
        allData: [
          {
            to: '/',
            text: 'HelloWorld',
            isColor: true,
            colors: 'red'
          },
          {
            to: '/SysUser',
            text: 'SysUser',
            isColor: false,
            colors: 'pink'
          },
          {
            to: '/business',
            text: 'business',
            isColor: false,
            colors: 'blue'
          }
        ],
        swiperOption: {
          loop: true,
          loopAdditionalSlides : 2,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: (index, className) => {
              return '<span class="' + className + '  swiper-pagination-bullet-custom">' + (index + 1) + '</span>';
            }
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          spaceBetween: 30,
          simulateTouch: false,
          // grabCursor: true,
          // direction: 'vertical',
          // watchSlidesProgress: true,
          // initialSlide: 0,
          // notNextTick: true,
          // speed: 2000,
          // autoplay: 2000, // 用户操作swiper之后，是否禁止autoplay，默认为true
          // autoplayDisableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay，默认为true
          // effect: 'fade',
          // onlyExternal: true,
          // setWrapperSize: true,
          // slidesPerView: 'auto',
          // paginationClickable: true,
          // paginationBulletRender: function( swiper, index, className ) {
          //   return '<span class="' + className + '">' + (index + 1) + '</span>'
          // },
          // prevButton: '.swiper-button-prev', // 上一张
          // nextButton: '.swiper-button-next', // 下一张
          // scrollbar: '.swiper-scrollbar', // 滚动条
          // mousewheelControl: true,
          // observeParents: true,
          onSlideChangeEnd: swiper => {
            this.page = swiper.realInsex + 1
            this.index = swiper.realInsex
          }
        }
      }
    },
    computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted () {
      // this.inSwiper()
    },
    methods: {
      // inSwiper () {
      //   var sife = this
      //   this.swiper.slideTo(0, 0, false)
      //   setInterval(function () {
      //     sife.swiper.slideNext()
      //   }, 2500)
      // },
      onColor (item) {
        item.isColor = !item.isColor
      }
    }
  }
</script>
<style lang="less" scoped>
  #sys{
    // height: 100px;
    line-height: 100px;
    font-size: 22px;
    width: 100%;
    div{
      float: left;
      a{
        color: #3f3a3f;
        text-decoration: none;
        padding: 10px;
        &.router-link-exact-active{
          color: plum;
        }
        &:hover{
          color: plum;
        }
      }
    }
    h1{
      float: left;
      height: 100px;
      font-size: 32px;
      line-height: 100%;
      img{
        height: 100%;
        vertical-align: middle;
      }
    }
  }
  .swiper-container{
    height: 500px;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    .swiper-slide{
      line-height: 500px;
      width: 100%;
      a{
        color: #fff;
        text-decoration: none;
        &:hover{
          color: yellow;
        }
      }
    }
  }
  @media (min-width: 1200px) {
    #sys{
      div{
        padding-left: 100px;
      }
      h1{
        padding-left: 100px;
      }
    }
  }
</style>
